<script setup>
import $ from 'jquery'
$(function(){
  $(".none2").click(function () {
    var bElement = $(".uls");
    if (bElement.is(":visible")) {
      bElement.hide();
    } else {
      bElement.show();
    }
  });
  $('.one').click(function(){
    $('#one').show()
    $('#two').hide()
    $('#three').hide()
  });
  $('.two').click(function(){
    $('#one').hide()
    $('#two').show()
    $('#three').hide()
  });
  $('.three').click(function(){
    $('#one').hide()
    $('#two').hide()
    $('#three').show()
  })
})
</script>
<template>
  <div id="staff">
    <!-- 导航开始 -->
    <div class="nav">
      <div class="nav-box">
        <div class="nav-content">
          <div class="none"><img src="../assets/素材/4.png" alt="" /></div>
          <div class="none1"><img src="../assets/素材/6.png" alt="" /></div>
        </div>
        <div class="none2"><img src="../assets/素材/更多1.png" alt="" /></div>
        <div class="uls">
          <ul>
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/staff">院部简介</router-link></li>
            <li><a href="#">办学特色</a></li>
            <li><a href="#">专业介绍</a></li>
            <li><a href="#">领导关怀</a></li>
            <li><a href="#">对外交流</a></li>
            <li><a href="#">社会服务</a></li>
            <li><a href="#">师资力量</a></li>
            <li><a href="#">实训队伍</a></li>
            <li><a href="#">实习基地</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 导航结束 -->
    <!-- banner图开始 -->
    <div class="banner"><img src="../assets/素材/17.png" alt=""></div>
    <!-- banner图结束 -->
    <!-- 内容开始 -->
    <div class="content">
      <div class="content-box">
        <div class="content-left">
          <ul>
            <li class="top1">快速导航<span class="span">Quick navigation</span></li>
            <li><a href="">院部简介</a></li>
          </ul>
        </div>
        <div class="content-right">
          <div class="top">
            <div class="top-left">
              院部简介
            </div>
            <div class="top-right">
              <!-- <div><img src="../img/16.png" alt=""></div> -->
              <div>
                当前所在位置：首页 | 院部简介
              </div>
              <div class="input">
                <input type="text" placeholder="输入关键词搜索">
                <img src="../assets/素材/22.png" alt="">
              </div>
            </div>
          </div>
          <div class="font">
            <div class="img">
              <img class="one" src="../assets/素材/20.png" alt="">
              <img class="two" src="../assets/素材/21.png" alt="">
              <img class="three" src="../assets/素材/19.png" alt="">
            </div>
            <div class="font-content">
              <div id="one">
                <!-- 图一 -->
                <div id="bottom1">
                  <li>山东城院召开公文写作培训会</li>
                  <div class="bottom2">
                    <p>2021-10-19</p>
                  </div>
                </div>
                <div id="bottom1">
                  <li>关于报送2022年部门重点工作和日常工作的通知</li>
                  <div class="bottom2">
                    <p>2021-10-19</p>
                  </div>
                </div>
                <div id="bottom1">
                  <li>速读山东城院年度工作报告</li>
                  <div class="bottom2">
                    <p>2021-10-19</p>
                  </div>
                </div>
                <div id="bottom1">
                  <li>中国共产党山东省城市服务技师学院第一届委员会第五次全体会议公报</li>
                  <div class="bottom2">
                    <p>2021-10-19</p>
                  </div>
                </div>
                <div id="bottom1">
                  <li>山东城院召开2022年度工作会议</li>
                  <div class="bottom2">
                    <p>2021-10-19</p>
                  </div>
                </div>
                <div id="bottom1">
                  <li>关于召开3月份月度调度会的通知</li>
                  <div class="bottom2">
                    <p>2021-10-19</p>
                  </div>
                </div>
              </div>
              <div id="two">
                <div class="two-top">
                  <div class="two1">
                    <div class="img1"><img src="../assets/素材/16.png" alt="" /></div>
                    <p>
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </p>
                    <div class="once"></div>
                    <div class="second">
                      <div class="p"><img src="../assets/素材/表1.png" alt="" />2022-02-17</div>
                    </div>
                  </div>
                  <div class="two1">
                    <div class="img1"><img src="../assets/素材/16.png" alt="" /></div>
                    <p>
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </p>
                    <div class="once"></div>
                    <div class="second">
                      <div class="p"><img src="../assets/素材/表1.png" alt="" />2022-02-17</div>
                    </div>
                  </div>
                  <div class="two1">
                    <div class="img1"><img src="../assets/素材/16.png" alt="" /></div>
                    <p>
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </p>
                    <div class="once"></div>
                    <div class="second">
                      <div class="p"><img src="../assets/素材/表1.png" alt="" />2022-02-17</div>
                    </div>
                  </div>
                  <div class="two1">
                    <div class="img1"><img src="../assets/素材/16.png" alt="" /></div>
                    <p>
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </p>
                    <div class="once"></div>
                    <div class="second">
                      <div class="p"><img src="../assets/素材/表1.png" alt="" />2022-02-17</div>
                    </div>
                  </div>
                  <div class="two1">
                    <div class="img1"><img src="../assets/素材/16.png" alt="" /></div>
                    <p>
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </p>
                    <div class="once"></div>
                    <div class="second">
                      <div class="p"><img src="../assets/素材/表1.png" alt="" />2022-02-17</div>
                    </div>
                  </div>
                  <div class="two1">
                    <div class="img1"><img src="../assets/素材/16.png" alt="" /></div>
                    <p>
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </p>
                    <div class="once"></div>
                    <div class="second">
                      <div class="p"><img src="../assets/素材/表1.png" alt="" />2022-02-17</div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="three">
                <div class="three1">
                  <div class="three-left">
                    <img src="../assets/素材/16.png" alt="">
                  </div>
                  <div class="three-right">
                    <div class="three-top">
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </div>
                    <div class="three-bottom">
                      <img src="../assets/素材/表1.png" alt="">
                      <p>2019/06/28</p>
                    </div>
                  </div>
                </div>
                <div class="three1">
                  <div class="three-left">
                    <img src="../assets/素材/16.png" alt="">
                  </div>
                  <div class="three-right">
                    <div class="three-top">
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </div>
                    <div class="three-bottom">
                      <img src="../assets/素材/表1.png" alt="">
                      <p>2019/06/28</p>
                    </div>
                  </div>
                </div>
                <div class="three1">
                  <div class="three-left">
                    <img src="../assets/素材/16.png" alt="">
                  </div>
                  <div class="three-right">
                    <div class="three-top">
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </div>
                    <div class="three-bottom">
                      <img src="../assets/素材/表1.png" alt="">
                      <p>2019/06/28</p>
                    </div>
                  </div>
                </div>
                <div class="three1">
                  <div class="three-left">
                    <img src="../assets/素材/16.png" alt="">
                  </div>
                  <div class="three-right">
                    <div class="three-top">
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </div>
                    <div class="three-bottom">
                      <img src="../assets/素材/表1.png" alt="">
                      <p>2019/06/28</p>
                    </div>
                  </div>
                </div>
                <div class="three1">
                  <div class="three-left">
                    <img src="../assets/素材/16.png" alt="">
                  </div>
                  <div class="three-right">
                    <div class="three-top">
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </div>
                    <div class="three-bottom">
                      <img src="../assets/素材/表1.png" alt="">
                      <p>2019/06/28</p>
                    </div>
                  </div>
                </div>
                <div class="three1">
                  <div class="three-left">
                    <img src="../assets/素材/16.png" alt="">
                  </div>
                  <div class="three-right">
                    <div class="three-top">
                      热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                    </div>
                    <div class="three-bottom">
                      <img src="../assets/素材/表1.png" alt="">
                      <p>2019/06/28</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="gengduo">
                查看更多&gt;
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容结束 -->
    <!-- 尾部开始 -->
    <div class="foot">
      <img class="img" src="../assets/素材/15.png" alt="" />
      <div class="foot-box">
        <div class="foot-content">
            <div class="none"><img src="../assets/素材/4.png" alt="" /></div>
            <div class="none1"><img src="../assets/素材/6.png" alt="" /></div>
        </div>
        <div class="foot-top">
          <div class="foot-left">
            <div class="left1">联系我们</div>
            <div class="left2">办公室：0535-2246666</div>
            <div class="left2">招生咨询：0535-2246625</div>
            <div class="left2">官网：www.sdcc.edu.cn</div>
            <div class="left2">邮箱：sdccxy@126.com</div>
            <div class="left2">校址：山东省烟台市高新区海天路1001号</div>
          </div>
          <div class="foot-center">
            <img src="../assets/素材/4.png" alt="" />
          </div>
          <div class="foot-right foot-none1">
            <img src="../assets/素材/14.png" alt="">
          </div>
          <div class="foot-right foot-none">
            <img src="../assets/素材/微信.png" alt="" />
            <img src="../assets/素材/微博.png" alt="" />
          </div>
        </div>
        <div class="foot-bottom">Copyright ©山东省城市服务技师学院版权所有</div>
      </div>
    </div>
    <!-- 尾部结束 -->
  </div>
</template>
<script>
</script>
<style lang="scss" scoped>
@import '../assets/staff.scss';
@import '../assets/staff1.scss';
</style>